<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="friend">
    <div class="friend-header">
      <router-link to="/my">
        <img src="../../assets/image/toux.png" style="margin-left: 15px;">
      </router-link>
      <b style="color: aqua;margin-left: 100px;font-size: 25px; ">医护圈</b>
      <img src="../../assets/image/ld.png" style="float: right;margin-right: 15px;" @click="msg()">
    </div>

    <div class="friend-main">
      <van-tabs background="rgb(200, 172, 31)" sticky offset-top="50px">
        <van-tab title="内科">内科</van-tab>
        <van-tab title="骨科">骨科</van-tab>
        <van-tab title="小儿科">小儿科</van-tab>
        <van-tab title="急诊科">
          <div class="main">
            <div @click="xqy()">
              <p>急寻：面神经炎的治疗方法</p>
              <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
              <span>
                周围性神经炎，下吧歪的，口齿不清楚，是神经科常见的一种疾病。
              </span>
              <i>收藏 3 建议 109</i>
            </div>
            <div>
              <p>急性肠胃炎怎么办</p>
              <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
              <span>
                去年肠胃炎再一次复发，该说不说确实难受，疼的我根本受不了好吧，现在回想起来依旧是泪流满面，经过多次治疗，终于是好了，确实到位
              </span>
              <i>收藏 0 建议 10</i>
            </div>
            <div>
              <p>治疗感冒最好的方法</p>
              <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
              <span>
                感冒俗称着凉，是人们最常遇到的一种疾病。说严重吧，其实没什么事，说不严重但是它可能会引起一系列的疾病，所以为了大家的身体健康，有病就治，别整没用的
              </span>
              <i>收藏 7 建议 93</i>
            </div>
            <div>
              <p>咳嗽的引起以及治疗</p>
              <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
              <span>
                普通感冒是引起咳嗽最常见的原因之一。病毒感染导致鼻腔、咽喉等部位炎症，刺激呼吸道黏膜，引起咳嗽。通常伴有流涕、鼻塞、咽痛等症状。
              </span>
              <i>收藏 11 建议 200</i>
            </div>
            <div>
              <p>头晕的治疗以及触发情况</p>
              <b>{{ `${year}-${month}-${day} ${Time}` }}</b><br>
              <span>
                贫血：
                由于血液中红细胞或血红蛋白减少，导致氧气输送不足，引起头晕。患者还可能出现面色苍白、乏力、心慌等症状。
              </span>
              <i>收藏 1 建议 20</i>
            </div>
          </div>
        </van-tab>

        <van-tab title="皮肤科">皮肤科</van-tab>
        <van-tab title="精神科">精神科</van-tab>
        <van-tab title="产妇科">产妇科</van-tab>
      </van-tabs>
      
    </div>

    <div class="friend-foot">
        <div class="icon_div" >
          <svg class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="825"><path d="M950.784 176.448a102.4 102.4 0 0 1 6.4 21.504 124.992 124.992 0 0 1 2.56 25.6 73.856 73.856 0 0 1-5.12 26.624 81.92 81.92 0 0 1-16.32 25.6q-12.224 12.288-21.888 21.504t-16.576 16.32q-8.128 8.192-15.296 14.336l-190.72-191.36q12.224-11.264 29.056-27.136t28.032-25.088a89.6 89.6 0 0 1 29.888-15.872 92.736 92.736 0 0 1 30.08-4.096 113.664 113.664 0 0 1 28.544 4.608 146.304 146.304 0 0 1 23.936 9.216 187.84 187.84 0 0 1 47.424 39.424 229.824 229.824 0 0 1 40.256 58.88m-794.24 499.2q6.4-6.4 28.544-29.184t56.064-56.832l74.176-74.432 82.56-83.2 219.264-219.776 190.656 192.448L588.8 624.768l-81.6 83.2q-40.768 39.936-73.408 73.216t-54.016 54.784q-21.44 21.504-25.6 24.576-10.176 9.216-23.424 19.2A127.104 127.104 0 0 1 303.36 896a443.264 443.264 0 0 1-41.792 17.408q-27.52 10.24-57.6 19.968t-57.088 16.896q-27.008 7.168-40.256 9.216a40.256 40.256 0 0 1-36.672-8.192 48.64 48.64 0 0 1-5.12-37.888 345.6 345.6 0 0 1 9.664-41.472q7.68-27.136 16.32-56.32t16.832-53.76a228.096 228.096 0 0 1 13.248-33.792 171.776 171.776 0 0 1 13.504-25.984 169.152 169.152 0 0 1 21.952-26.112m0 0z m339.968 193.024h91.392V960H496.512v-91.008m185.28 0h91.2V960h-91.264v-91.008m185.984 0h91.2V960h-91.136v-91.008" fill="" p-id="826"></path></svg>
          </div>
      <van-tabbar>
        <van-tabbar-item icon="home-o" @click="toHome()"></van-tabbar-item>
           <!-- <van-tabbar-item  @click="shux()"> 

        </van-tabbar-item>  -->
       
        <van-tabbar-item icon="play-circle-o" @click="svi()"></van-tabbar-item>
      </van-tabbar>

    </div>
  </div>
</template>
<script lang="ts" setup>

import { useRouter } from 'vue-router'
import { MyIcon } from '../../utils/Mylcon';

const router = useRouter()
const toHome = () => {
  router.push('/home')
}
const msg = () => {
  router.push('/message')
}
const svi = () => {
  router.push('/video')
}
const shux = () => {
  router.push('/friend/writepyq')
}
//去病友圈详情页
const xqy = () => {
  router.push('/friend/detail')
}
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1; // 月从 0 开始，要加 1
const day = now.getDate();
// 获取当前时间
const date = new Date();
const Time = date.toLocaleTimeString();


</script>
<style scoped lang="scss">
.friend {
  width: 100vw;
  height: 100vh;
  background: #f0f0f0;

  .friend-header {
    z-index: 2;
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 50px;
    background-color: #fff;

    img {
      width: 30px;
      height: 30px;
      margin-top: 10px;
    }
  }

  .friend-main {
    height: 500px;
    width: 100%;
    border-top: 1px solid red;
    margin-top: 60px;


    .main {
      width: 100%;
      height: auto;

      div {
        margin-top: 10px;
        width: 100%;
        height: 150px;
        background-color: #fff;

        p {
          font-size: 15px;
          font-weight: 900;
        }

        i {
          color: orange;
          float: right;
          margin-top: 10px;
        }
      }
    }

  }

  .friend-foot {
    width: 100%;
    height: 100px;
    background: #fff;
    position: fixed;
   bottom: 0px;
    .icon_div{
      text-align: center;
      line-height: 50px;
     border-radius: 50%;
     z-index: 999;
      font-size: 25px;
      left: 45%;
     color: #fae25b;
     margin: 0 auto;
      width: 50px;
      height: 50px;
      background-color: #3087ea;
    }

  }
}

</style>
